<template>
  <div class="listView" :id="listId">
    <div class="topBar">
      <div class="topNavList">
        <div class="topNav" :class="{'active':mode == 1}" @click="selectMode(1)">我的考试</div>
        <div class="topNav" :class="{'active':mode == 2}" @click="selectMode(2)">历史成绩</div>
      </div>
    </div>
    <div class="barList">
      <div class="bar" v-for="(item,index) in list">
        <div class="leftContent">
          <div class="title">{{ item.roomName }}</div>
          <div class="time">考试开始时间：{{ item.roomStartTime }}</div>
          <div class="time">考试结束时间：{{ item.roomEndTime }}</div>
        </div>
        <div class="joinExam" @click="goDetail(item)" v-if="mode == 1">进入考试</div>
        <div class="myScore" @click="goShowDetail(item)" v-if="mode == 2">
          <div class="des">本轮成绩</div>
          <div class="score">{{ item.score }}<span class="unit">分</span></div>
        </div>
      </div>
    </div>
    <van-tabbar v-model="active" active-color="#2A5C9F" @change="onChange">
      <van-tabbar-item>
        <span>基本信息</span>
        <template #icon="props">
          <img :src="props.active ? icon.info.active : icon.info.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>我的培训</span>
        <template #icon="props">
          <img :src="props.active ? icon.train.active : icon.train.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>我的考试</span>
        <template #icon="props">
          <img :src="props.active ? icon.exam.active : icon.exam.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import infoA from '../../assets/img/tabbar/infoA.png'
import info from '../../assets/img/tabbar/info.png'
import exam from '../../assets/img/tabbar/exam.png'
import examA from '../../assets/img/tabbar/examA.png'
import train from '../../assets/img/tabbar/train.png'
import trainA from '../../assets/img/tabbar/trainA.png'

export default {
  data() {
    return {
      pageNo:0,//页码
      pageSize:5,//页数
      total:1,
      list:[],
      listId: 'list' + Math.floor(Math.random() * 100000),
      active:2,
      mode:1,
      icon:{
        info:{
          active:infoA,
          inactive:info,
        },
        exam:{
          active:examA,
          inactive:exam,
        },
        train:{
          active:trainA,
          inactive:train,
        },
      }
    }
  },
  mounted() {
    document.getElementById(this.listId).addEventListener('scroll', this.Scrollbottom);
    this.getPage()
  },
  methods: {
    selectMode(mode){
      if (this.mode == mode) return;
      this.mode = mode;
      this.initPage()
    },
    initPage(){
      this.pageNo = 1;
      this.list = [];
      this.getPage()
    },
    getPage() {
      let obj = {
        pageNo:this.pageNo,
        pageSize:this.pageSize
      }
      const self = this;
      obj.flag = 0
      if (this.mode == 2){
        obj.flag = 1
      }
      this.request({
        url: "/exam/ztTrainPersonRoom/getPersonExamListByPersonId",
        method: 'post',
        data:obj
      }).then(function (res) {
        if (res){
          let list = res.data.result.records
          if (list){
            list.forEach(function (val){
              self.list.push(val)
            })
          }
          self.total = res.data.result.total
        }
      })
    },
    Scrollbottom () {
      let dom = document.getElementById(this.listId)
      let scrollTop = dom.scrollTop;
      let clientHeight = dom.clientHeight;
      let scrollHeight = dom.scrollHeight;
      if (scrollTop + clientHeight >= scrollHeight) {
        let totalPage = Math.ceil(this.total/this.pageSize);
        if (this.pageNo < totalPage){
          this.pageNo++
          this.getPage()
        }
      }
    },
    goDetail(item){
      this.$router.push({path: "/examDetail", query: {roomId:item.roomId,examTime:item.examTime}})
    },
    goShowDetail(item){
      this.$router.push({path: "/examShow", query: {roomId:item.roomId}})
    },
    onChange(mode){
      if (mode == 0){
        this.$router.push({path: "/index"})
      }else if (mode == 2){
        this.$router.push({path: "/examList"})
      }else if (mode == 1){

      }
    },
  }
}
</script>
<style lang="scss" scoped>
  .topNavList{
    width: 316px;
    height: 54px;
    box-sizing: border-box;
    line-height: 50px;
    color: white;
    font-size: 30px;
    text-align: center;
    border-radius: 27px;
    float: left;
    margin-left: 223px;
    margin-top: 23px;
    background-size: 100% 100%;
    border: 2px solid gainsboro;
    .topNav{
      float: left;
      width: 50%;
      height: 100%;
      border-radius: 23px;
      &.active{
        color: #2A5C9F;
        background-color: white;
      }
    }
  }
  .listView{
    position: fixed;
    z-index: 99;
    background-color: rgb(246,246,246);
    .barList{
      width: 100%;
      overflow: hidden;
      margin-top: 100px;
      padding-bottom: 120px;
    }
    .bar{
      text-align: left;
      .leftContent{
        width: 420px;
        float: left;
        box-sizing: border-box;
        padding-top: 35px;
        height: 100%;
        .title{
          font-size: 28px;
          line-height: 50px;
        }
        .time{
          font-size: 24px;
          color: #888585;
          line-height: 40px;
        }
      }
      .joinExam{
        float: right;
        width: 157px;
        height: 51px;
        margin-top: 71px;
        line-height: 51px;
        text-align: center;
        color: #FFFCFC;
        font-size: 28px;
        background-image: url("../../assets/img/joinExam.png");
        background-size: 100% 100%;
      }
      .myScore{
        float: right;
        width: 152px;
        height: 85px;
        text-align: center;
        color: #FFFCFC;
        font-size: 18px;
        line-height: 30px;
        margin-top: 54px;
        background-image: url("../../assets/img/myScore.png");
        box-sizing: border-box;
        background-size: 100% 100%;
        .des{
          float: left;
          width: 100%;
          overflow: hidden;
        }
        .score{
          font-size: 48px;
          font-weight: bold;
          float: left;
          width: 100%;
          line-height: 50px;
          .unit{
            font-size: 24px;
          }
        }
      }
    }
  }
</style>
